<!-- https://konvajs.org/docs/sandbox/Video_On_Canvas.html -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/konva@8.2.1/konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Konva GIF Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
<button id="play">Play</button><button id="pause">Pause</button>
<div id="container"></div>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;

  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
  });

  var layer = new Konva.Layer();
  stage.add(layer);
  // <video className="" playsInline="true" webkit-playsinline="true" x5-playsinline="true" tabIndex="2" mediatype="video"
  //        src="blob:http://localhost:63342/cb31ca70-9501-4a89-aa1e-887e11a8c148"></video>


  var video = document.createElement('video');
  video.webkitPlaysinline = "true"
  video.x5playsinline = "true"
  video.tabIndex = "2"
  video.mediatype = "video"
  video.src =
    'http://dslive.grtn.cn/stzh/sd/live.m3u8';
  // video.src =
  //   'https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm';
  var image = new Konva.Image({
    image: video,
    draggable: true,
    x: 50,
    y: 20,
  });
  layer.add(image);
  var text = new Konva.Text({
    text: 'Loading video...',
    width: stage.width(),
    height: stage.height(),
    align: 'center',
    verticalAlign: 'middle',
  });
  layer.add(text);

  var anim = new Konva.Animation(function () {
    // do nothing, animation just need to update the layer
  }, layer);

  // update Konva.Image size when meta is loaded
  video.addEventListener('loadedmetadata', function (e) {
    text.text('Press PLAY...');
    image.width(video.videoWidth);
    image.height(video.videoHeight);
  });

  document.getElementById('play').addEventListener('click', function () {
    text.destroy();
    video.play();
    anim.start();
    console.log('image',image.toJSON())
    console.log('image',layer.toJSON())

  });
  document.getElementById('pause').addEventListener('click', function () {
    video.pause();
    anim.stop();
  });
</script>
</body>
</html>
